<template>
  <div class="y-com-input" theme1 y-flexXb :style="{background: bgColor ? bgColor + ' !important' : ''}">
    <li y-flexX :style="{border: noline ? 'none' : ''}">{{title}}</li>
      <div class="warp" y-flexX>
        <slot>
        </slot>
      </div>
  </div>
</template>

<script>
export default {
  name: 'YcomInput',
  props: ['title', 'noline', 'bgColor']
}
</script>

<style scoped>
.y-com-input{
    width: var(--y-com-width-percent);
    height: var(--y-com-hight-control1);
    border-radius: var(--y-com-radius0);
    margin: var(--y-com-margin0) 0;
    box-sizing: border-box;    /* overflow: hidden; */
    font-size: var(--y-com-fontSize-common) !important;
    animation: ycominit var(--y-com-animation-time2);
}
.y-com-input li{
  width: fit-content;
  white-space: nowrap;
  min-width: 35%;
  min-height: 60%;
  /* color: var(--y-com--theme); */
  border-right:var(--y-com-themeborderColor) 1px solid ;
  /* border-right:var(--y-com--theme) 1px solid ; */
  user-select: none;
}
.warp{
  flex: 1;
}
</style>
